<template>
  <!-- 预存款管理 -->
  <div class="home-page-container">
    <div class="pre-wrapper">
      <!-- account money 账户资金 -->
      <div class="summary">
        <div class="title">
          <span class="title-label">油站/商户名称：</span>
          <span class="title-info">{{depositsInfo.businessName}}</span>
        </div>
        <el-row>
          <el-col :span="12">
            <div class="balance-account">
              <div class="value">{{depositsInfo.effectiveBalance || 0}}</div>
              <div class="label">账户汇总可用余额(元)</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="balance-channel">
              <div class="value">{{depositsInfo.channelFeeBalance || 0}}</div>
              <div class="label">通道费汇总余额(元)</div>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- form 查询 -->
      <div class="search">
        <mer-search :searchConfig="formConfig" :searchBar="searchBar"
        @search="search"
        @reset="reset(initQuery)"
        @changeTime="(value,model)=>changeTime(value,'searchBar', 'tradingTimeStart', 'tradingTimeEnd')"
        :loading="tableLoading">
          <template slot="handler">
            <el-button size="mini" @click="download" icon="el-icon-download">导出</el-button>
          </template>
        </mer-search>
      </div>
    </div>
    <el-card style="margin-top:31px;" shadow="never">
      <!-- tabs 能源切换 -->
      <el-tabs v-model="searchBarOther.tradingCategory" @tab-click="handleClick" type="card">
        <el-tab-pane v-for="(item,index) in categoryTypes" :label="item.name" :name="String(item.code)" :key="index"></el-tab-pane>
      </el-tabs>
      <!-- table 表格 -->
      <mer-table :loading="tableLoading"
        :tableConfig="tableConfig"
        :tableData="tableData"
        :pagination="pagination"
        @SizeChange="handleSizeChange"
        @PageChange="pageChange"
        style="padding-top:0">
      </mer-table>
    </el-card>
  </div>
</template>
<script>
import listPage from '@/mixins/listPage'
import queryMix from '@/views/finance/mixins/query';
import { getDepositsInfoApi, getQueryDepositsTradeTypeApi, getQueryTradeCategoryApi, getDepositsListApi, downloadDepositsApi} from '@/api/finance'

// 查询表单配置
let formConfig = [
  { label: '支付时间', type: 'date', modelName: 'tradeTime', model: '', dateType: 'datetimerange', format: 'yyyy-MM-dd HH:mm:ss', clearable: false },
  { label: '交易类型', type: 'select', modelName: 'tradingType', placeholder: '全部', selectOptions: [], define: true, selectLabel: 'name', selectValue: 'code' }
]
// 表格参数配置
let tableConfig = [
  { label: '交易时间', prop: 'tradingTime', width: 150 },
  { label: '订单号', prop: 'orderNo', width: 180  },
  { label: '交易类型', prop: 'tradingTypeName' },
  { label: '金额类型', prop: 'amountTypeName' },
  { label: '交易金额(元)', prop: 'tradingAmount',width: 136 },
  { label: '交易后可用余额(元)', prop: 'effectiveBalance',width: 136 },
  { label: '交易后通道费余额(元)', prop: 'channelFeeBalance',width: 150 },
  { label: '备注', prop: 'remark', width: 160 }
]
export default {
  name: 'finance_preDeposits',
  mixins:[ listPage, queryMix ],
  data(){
    return{
      searchBarOther:{
        tradingCategory: ''     //请选择交易类型 0   （1 汽油 2 柴油 3 天然气）
      },
      tradeTime:'',
      formConfig: formConfig,
      tableConfig: tableConfig,
      depositsInfo:{
        businessName: '',
        effectiveBalance: '0.00',
        channelFeeBalance: '0.00'
      },
      categoryTypes:[]
    }
  },
  created(){
    this.initPage()
  },
  methods:{
    initPage () {
      this.getDepositsInfo()
      this.initQuery()
      this.getQueryProps()
      this.getTabProps()
    },  
    // 设置默认查询条件，默认时间间隔31天
    initQuery () {
      this.tradeTime = ''
      this.initTime('tradeTime', 30, 'searchBar', true, 'tradingTimeStart','tradingTimeEnd')
      const { tradeTime } = this
      const initObj = { tradeTime: [tradeTime, null] }
      this.setSearchConfig(initObj)
      //重置交易类别
      this.searchBarOther.tradingCategory = (this.categoryTypes[0]?.code || '') + ''
    },
    // 获取查询条件：交易类型
    async getQueryProps () {
      const { code, result = [] } = await getQueryDepositsTradeTypeApi()
      if(code !== 200) return
      const initObj = { tradingType: result }
      this.setSearchConfig(initObj)
    },
    // 获取查询条件：交易类别
    async getTabProps () {
      try{
        const { code,result = [] } = await getQueryTradeCategoryApi()
        if(code !== 200) return
        this.categoryTypes = result || []
        this.searchBarOther.tradingCategory = (this.categoryTypes[0]?.code || '') + ''
      }catch(e){
        console.log(e)
      }finally{
        this.initList(getDepositsListApi,false,null,this.searchBarOther)
      }
    },
    // 获取账户余额信息
    async getDepositsInfo (data) {
      try{
        const { code, result = {} } = await getDepositsInfoApi(data)
        if(code !== 200) return
        const { businessName = '' , effectiveBalance = '0.00', channelFeeBalance = '0.00' } = result
        this.depositsInfo.businessName = businessName
        this.depositsInfo.effectiveBalance = effectiveBalance
        this.depositsInfo.channelFeeBalance = channelFeeBalance
      }catch(err){
        console.log(err)
      }
    },
    // 表格tab切换,重新请求列表数据(tab,event)
    handleClick () {
      this.search()
    },
    //导出
    download () {
      this.downloadFile(downloadDepositsApi,'预存款')
    }
  }
}
</script>
<style lang="less" scoped>
.home-page-container{
  margin-top: 20px;
}
.pre-wrapper{
  display: flex;
  flex-flow: nowrap;
  justify-content: space-between;
  & > div{
    background: #fff;
  }
  .summary{
    width: 50%;
    margin-right: 30px;
    padding: 20px 25px;
    box-sizing: border-box;
    .title{
      font-size:18px;
      font-weight:500;
      margin-bottom: 25px;
      display: flex;
      .title-label{
        white-space: nowrap;
      }
      .title-info{
        word-break: break-all;
      }
    }
    .balance-account{
      border-left: 3px solid #E7B911;
      padding-left: 10px;
    }
    .balance-channel{
      border-left: 3px solid #9A02C9;
      padding-left: 10px;
    }
    .label{
      font-size:14px;
    }
    .value{
      font-size:26px;
      font-weight:bold;
      margin-bottom: 10px;
    }
  }
  .search{
    width: 50%;
    padding: 20px 25px;
    box-sizing: border-box;
  }
}
</style>